<template>
	<view class="content">
		<u-navbar
			title="账户设置" 
			:bg-color="`${mainColor}`" 
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"
			/>
		<view class="content-page">
			<view class="item flex-b">
				<view class="name">
					用户ID
				</view>
				<view class="value">
					{{userinfo.account_id}}
				</view>
			</view>
			<view class="item flex-b clickable" @click="clickNickname">
				<view class="name">
					用户昵称
				</view>
				<view class="value">
					{{userinfo.nickname || userinfo.phone}}
				</view>
			</view>
			<view class="item flex-b">
				<view class="name">
					手机号
				</view>
				<view class="value">
					{{userinfo.phone}}
				</view>
			</view>
			<view class="item flex-b">
				<view class="name">
					账户余额
				</view>
				<view class="value">
					{{userinfo.balance}}
				</view>
			</view>
			<view class="item flex-b clickable" @click="clickBillDetail">
				<view class="name">
					账单明细
				</view>
				<view class="value flex-a">
					<u-icon name="arrow-right" size="16" color="#606266"></u-icon>
				</view>
			</view>
			<view class="item flex-b clickable" v-for="(item, index) in userinfo.withdrawal_methods"
				@click="clickWithdrawalMethod(item.type)" v-if="!hideItem(item)">
				<view class="name">
					<image src="/static/alipay.svg" class="left-img" v-if="item.type == 'alipay'"></image>
					<image src="/static/bank.svg" class="left-img" v-if="item.type == 'bank'"></image>
					<image src="/static/weixin.svg" class="left-img" v-if="item.type == 'wechat'"></image>
					{{item.name}}
				</view>
				<view class="value flex-a">
					管理
					<u-icon name="arrow-right" size="16" color="#606266" style="margin-left: 10px;"></u-icon>
				</view>
			</view>
		</view>
		<view class="content-page" style="margin-top: 10px;">
			<view class="item flex-b clickable" @click="clickUserAgreement">
				<view class="name">
					用户协议
				</view>
				<view class="value flex-a">
					<u-icon name="arrow-right" size="16" color="#606266"></u-icon>
				</view>
			</view>
			<view class="item flex-b clickable" @click="clickPrivacyAgreement">
				<view class="name">
					隐私协议
				</view>
				<view class="value flex-a">
					<u-icon name="arrow-right" size="16" color="#606266"></u-icon>
				</view>
			</view>
			<view class="item flex-b clickable" @click="clickTransferAgreement" v-if="!onlineAudit">
				<view class="name">
					卡券转让协议
				</view>
				<view class="value flex-a">
					<u-icon name="arrow-right" size="16" color="#606266"></u-icon>
				</view>
			</view>
			<view class="item flex-b clickable" @click="clickCancel">
				<view class="name">
					账户注销
				</view>
				<view class="value flex-a">
					<u-icon name="arrow-right" size="16" color="#606266"></u-icon>
				</view>
			</view>
		</view>
		<u-modal :show="showCancelModal" title="验证" @confirm="submitCancel" async-close show-cancel-button
			@cancel="showCancelModal = false">
			<view class="slot-content">
				<view class="one-btn">
					<view class="phone-input">
						<input :value="tel" @input="telChanged" type="tel" placeholder="请输入手机号码" class="input-class"/>
					</view>
					<view class="flex-b">
						<view class="phone-input">
							<input :value="code" @input="codeChanged" type="number" placeholder="请输入验证码" class="input-class" />
						</view>
						<view class="code-counter" v-if="codeCounting" @click="notify(`${codeCounter}秒后重新发送`)">
							{{codeCounter}}秒重新发送
						</view>
						<u-button plain color="#e33233" @click="clickSendCode" v-else
							custom-style="width: 145px;height:52px;border: 2px solid #e33233;margin-left:10px;">发送验证码</u-button>
					</view>
				</view>
			</view>
		</u-modal>
		<view class="fix-bottm" :style="{bottom:`${bottomHeight}px`}">
			<u-button :color="`${mainColor}`" shape="circle" @click="clickLogout"
				:custom-style="{color: `${textColor}`}">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	import { systemInfo } from '@/utils/mixin';
	import { cancelAccount, logout, sendSMSAuth, userCenter } from '@/api';
	import token from '@/utils/token';
	import {mapState, mapGetters} from "vuex";

	export default {
		mixins: [systemInfo],
		data() {
			return {
				userinfo: {},
				showCancelModal: false,
				tel: '',
				code: '',
				codeCounter: 0,
				codeCounting: false,
				timerId: null
			}
		},
		onLoad() {
			this.getSystemInfo();
			//#ifdef MP-ALIPAY
			uni.hideTabBar();
			//#endif
		},
		onShow() {
			this.loadUserInfo();
		},
		onHide() {
			this.clearCodeCounter();
		},
		computed: mapState(['onlineAudit']),
		methods: {
			async loadUserInfo() {
				if (token.check()) {
					this.userinfo = {};
					this.$store.state.userinfo = {};
					return;
				}
				
				const res = await userCenter();
				this.userinfo = res.data || {};
				this.$store.state.userinfo = res.data || {};
			},
			hideItem(item) {
				if (this.$store.state.onlineAudit) {
					// #ifdef MP-WEIXIN
					return item.type == 'alipay';
					// #endif
					// #ifdef MP-ALIPAY
					return item.type == 'wechat';
					// #endif
				}
				
				return false;
			},
			telChanged({detail}) {
				this.tel = detail.value.trim();
			},
			codeChanged({detail}) {
				this.code = detail.value.trim();
			},
			clickBillDetail() {
				uni.navigateTo({
					url:'/pages/bill/index'
				})
			},
			clickWithdrawalMethod(type) {
				if (type == 'alipay') {
					uni.navigateTo({
						url:'/pages/account/setting'
					})
				} else if (type == 'bank') {
					uni.navigateTo({
						url: '/pages/account/bank'
					})
				}
			},
			clickUserAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index?type=user&title=用户协议'
				})
			},
			clickPrivacyAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index?type=privacy&title=隐私协议'
				})
			},
			clickTransferAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/index?type=transfer&title=卡券转让协议'
				})
			},
			clickCancel() {
				const that = this;
				uni.showModal({
					title: '提示',
					content: '您确定要注销账号吗？',
					success: function ({confirm}) {
						if (confirm) {
							that.showCancelModal = true;
						}
					}
				});
			},
			clickLogout() {
				uni.showModal({
					title: '提示',
					content: '您确定要退出登录吗？',
					success: async ({confirm}) =>{
						if (confirm) {
							await logout();
							this.reLaunch();
						}
					}
				});
			},
			async clickSendCode() {
				if (this.tel.length === 0) {
					this.notify('手机号码不能为空！');
					return
				}
				
				if (this.tel.length < 11 || !/^1[3-9][0-9]{9}$/.test(this.tel)) {
					this.notify('手机号码格式不正确！');
					return
				}
				
				const res = await sendSMSAuth(this.tel, 'cancel');
				if (res.code === 2000) {
					this.notify('验证码发送成功');
					this.code = '';
					this.codeCounter = 120;
					this.codeCounting = true;
					this.timerId = setInterval(() => {
						this.codeCounter -= 1;
						if (this.codeCounter <= 0) {
							this.clearCodeCounter();
						}
					}, 1000)
				}
				
				if (res.data.code) {
					this.notify(`验证码：${res.data.code}`, 3000);
				}
			},
			async submitCancel() {
				if (this.tel.length === 0) {
					this.notify('手机号码不能为空！');
					return
				}
				
				if (this.tel.length < 11 || !/^1[3-9][0-9]{9}$/.test(this.tel)) {
					this.notify('手机号码格式不正确！');
					return
				}
				
				if (this.code.length === 0) {
					this.notify('验证码不能为空！');
					return
				}

				const res = await cancelAccount(this.tel, this.code);
				this.showCancelModal = false;
				if (res.code == 2000) {
					this.setToast(res.msg);
					this.reLaunch();
				}
			},
			reLaunch() {
				token.clear();
				this.userinfo = {};
				this.$store.state.userinfo = {};
				uni.reLaunch({
					url:'/pages/index/index'
				});
				this.$store.state.tabIndex = 0;
			},
			clearCodeCounter() {
				this.codeCounter = 0;
				this.codeCounting = false;
				if (this.timerId) {
					clearInterval(this.timerId);
					this.timerId = null;
				}
			},
			notify(message, duration) {
				uni.showToast({
					icon:'none',
					title:message,
					duration:duration||1500
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page {
    padding: 0 10px 0;
    font-family: Times New Roman;
    background-color: #fff;
	
	.item {
	    width: 100%;
	    height: 52px;
	    line-height: 52px;
	    border-bottom: 0.5px solid #f1f1f1;
	    padding: 0 10px;
	    box-sizing: border-box;
		background-color: #fff;
		
		.name {
		    font-size: 14px;
		    color: #333;
			
			.left-img {
			    position: relative;
			    top: 5px;
			    width: 20px;
			    height: 20px;
			    margin-right: 10px;
			}
		}
		
		.value {
		    font-size: 14px;
		}
	}
}

.clickable:active {
	background-color: #eee;
}

.one-btn {
	.phone-input {
		width: 100%;
		height: 52px;
		line-height: 52px;
		box-sizing: border-box;
		background-color: #f1f1f1;
		margin-bottom: 20px;
	}
	
	.code-counter {
		width: 145px;
		height: 52px;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 49px;
		text-align: center;
		border: 2px solid #e33233;
		background-color: #fff;
		margin-left: 10px;
		color: #e33233;
	}
	
	.input-class {
		flex: 1 1 0%; 
		width: 100%; 
		height: 100%; 
		background: rgb(241, 241, 241); 
		border-radius: 8px; 
		line-height: 100%; 
		padding-left: 15px; 
		box-sizing: border-box;
	}
}

.fix-bottm {
    position: fixed;
    bottom: 0;
    left: 0;
	right: 0;
    padding: 10px;
    box-sizing: border-box;
}
</style>
